<template>
  <div class="clearfix menu-pub" :class="{ small: isCollapse }">
    <el-menu
      :default-active="menuSelect"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose">
      <template v-for="(item, ind) in menuData" :key="ind">
        <el-menu-item
          v-if="!item.children"
          :index="`${ind}`"
          @click="Opentab(item, `${ind}`)"
        >
          <i class="iconfont" :class="item.icon"></i>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
        <el-sub-menu v-if="item.children" :index="`${ind}`">
          <template #title>
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(menus, i) in item.children"
              :index="`${ind}-${i}`"
              :key="`${ind}-${i}`"
              @click="Opentab(menus, `${ind}-${i}`)"
            >
              {{ menus.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  props: {
    menuData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isCollapse: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      menuSelect: "0",
    };
  },
  // 注入全局变量
  inject: ["imageUrl", "serviceUrl"],
  mounted() {

    this.menuSelect = localStorage.getItem("menuSelect")
      ? localStorage.getItem("menuSelect")
      : "";
    console.log(this.menuSelect,'this.menuSelect');
  },

  methods: {
    toIndex() {},
    Opentab(item, i) {
      localStorage.removeItem('searchFormData')
      localStorage.setItem("menuSelect", i);
      this.menuSelect = i;
      this.$router.push(item.url);
    },
    handleOpen() {},
    handleClose() {},
  },
};
</script>

<style lang="less" scoped>
.menu-pub {
  position: fixed;
  top: 60px;
  bottom: 0px;
  left: 0px;
  width: 230px;
  background: #fff;
  padding: 10px;
  &.small {
    width: 65px;
  }
}
:deep(.el-menu) {
  border: 0px !important;
  font-size: 16px;
}

:deep(.el-menu > .el-menu-item.is-active),
:deep(.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title) {
  background: #E90D00;
  color: #fff;
  border-radius: 5px;
}
:deep(.el-menu-item){
  font-weight: bold;
}
:deep(.el-menu-item i),
:deep(.el-sub-menu__title i) {
  font-size: 20px;
  margin-right: 5px;
}
.small {
  :deep(.el-sub-menu__title) {
    justify-content: center;
  }
}
:deep(.el-menu-item-group__title) {
  padding: 0px;
}
</style>
